@import './variables.scss';

html,
body,
#app {
  width: 100%;
  height: 100%;
}

.yc-el-border {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.yc-el-border-primary {
  border-radius: 4px;
  border: 1px solid #409EFF;
}
.yc-el-border-radius {
  border-radius: 4px;
}

.yc-scroll-x {
  overflow-x: scroll;
}

.yc-scroll-y {
  overflow-y: scroll;
}

.yc-p-r {
  position: relative;
}

.yc-p-b {
  position: absolute;
}

.yc-p-f {
  position: fixed;
}

.yc-na {
  cursor: not-allowed;
}

.yc-ihs:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  transition: .3s;
  border-radius: 4px;
}

.yc-bs-black {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.yc-bs-light {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// text overflow
.yc-text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc-text-nowrap {
  white-space: nowrap;
}

// 颜色
@each $key,
$value in $colors {
  .yc-border-#{$key} {
    border: 1px solid $value;
  }

  @each $key1,
  $value1 in $directions {
    .yc-border-#{$key1}-#{$key} {
      border-#{$value1}: 1px solid $value;
    }

    @for $i from 0 through 30 {
      .yc-border-#{$key1}-#{$key}-#{$i} {
        border-#{$value1}: 1px * $i solid $value;
      }

      .yc-border-#{$key}-#{$i} {
        border: 1px * $i solid $value!important;
      }
    }
  }

  .yc-text-#{$key} {
    color: $value;
  }

  .yc-bg-#{$key} {
    background-color: $value;
  }
}



.yc-flex-column {
  flex-direction: column;
}

.yc-text-center {
  text-align: center;
}

.yc-text-left {
  text-align: left;
}

.yc-text-right {
  text-align: right;
}

.yc-d-flex {
  display: flex;
}

.yc-jc-center {
  justify-content: center;
}

.yc-flex-wrap {
  flex-wrap: wrap;
}

.yc-flex-1 {
  flex: 1;
}

.yc-td {
  text-decoration: line-through;
}

.yc-jc-between {
  justify-content: space-between;
}

.yc-jc-around {
  justify-content: space-around;
}

.yc-flex-grow-1 {
  flex-grow: 1;
}

.yc-dj {
  display: flex;
  justify-content: center;
}

.yc-da {
  display: flex;
  align-items: center;
}

.yc-dja {
  display: flex;
  justify-content: center;
  align-items: center;
}

.yc-ai-center {
  align-items: center;
}

.yc-cursor {
  cursor: pointer;
}

.yc-fl {
  float: left;
}

.yc-fr {
  float: right;
}

.yc-m-auto {
  margin: auto;
}

@for $i from 0 through 300 {

  .yc-z-#{$i} {
    z-index: $i;
  }

  @each $key,
  $value in $directions {
    .yc-p#{$key}-#{$i} {
      padding-#{$value}: 1px * $i !important;
    }

    .yc-p#{$key}-b-#{$i} {
      padding-#{$value}: 1% * $i !important;
    }

    .yc-m#{$key}-#{$i} {
      margin-#{$value}: 1px * $i !important;
    }

    .yc-m#{$key}-b-#{$i} {
      margin-#{$value}: 1% * $i !important;
    }

    .yc-#{$key}-#{$i} {
      #{$value}: 1px * $i !important;
    }
    .yc-#{$key}--#{$i} {
      #{$value}: -1px * $i !important;
    }

    .yc-#{$key}-b-#{$i} {
      #{$value}: 1% * $i !important;
    }
  }

  .yc-w-b-#{$i} {
    width: 1% * $i !important;
  }

  .yc-h-b-#{$i} {
    height: 1% * $i !important;
  }

  .yc-p-#{$i} {
    padding: 1px * $i !important;
  }

  .yc-p-b-#{$i} {
    padding: 1% * $i !important;
  }

  .yc-px-#{$i} {
    padding-left: 1px * $i !important;
    padding-right: 1px * $i !important;
  }

  .yc-px-b-#{$i} {
    padding-left: 1% * $i !important;
    padding-right: 1% * $i !important;
  }

  .yc-py-#{$i} {
    padding-top: 1px * $i !important;
    padding-bottom: 1px * $i !important;
  }

  .yc-py-b-#{$i} {
    padding-top: 1% * $i !important;
    padding-bottom: 1% * $i !important;
  }

  .yc-m-#{$i} {
    margin: 1px * $i !important;
  }

  .yc-m-b-#{$i} {
    margin: 1% * $i !important;
  }

  .yc-mx-#{$i} {
    margin-left: 1px * $i !important;
    margin-right: 1px * $i !important;
  }

  .yc-mx-b-#{$i} {
    margin-left: 1% * $i !important;
    margin-right: 1% * $i !important;
  }

  .yc-my-#{$i} {
    margin-top: 1px * $i !important;
    margin-bottom: 1px * $i !important;
  }

  .yc-myb--#{$i} {
    margin-top: 1% * $i !important;
    margin-bottom: 1% * $i !important;
  }

  .yc-fs-#{$i} {
    font-size: 1px * $i !important;
  }

  .yc-fw-#{$i} {
    font-weight: 1 * $i !important;
  }

  .yc-lh-#{$i} {
    line-height: 1px * $i !important;
  }

  .yc-br-#{$i} {
    border-radius: 1px * $i !important;
  }

  .yc-br-b-#{$i} {
    border-radius: 1% * $i !important;
  }
}

.yc-fw-b {
  font-weight: bold;
}

// 宽高
@for $i from 0 through 1500 {
  .yc-w-#{$i} {
    width: 1px * $i !important;
  }

  .yc-w-min-#{$i} {
    min-width: 1px * $i !important;
  }

  .yc-w-max-#{$i} {
    max-width: 1px * $i !important;
  }

  .yc-h-#{$i} {
    height: 1px * $i !important;
  }

  .yc-h-min-#{$i} {
    min-height: 1px * $i !important;
  }

  .yc-h-max-#{$i} {
    max-height: 1px * $i !important;
  }
}

.el-message-box__message p {
  word-break: break-all;
  max-height: 500px;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
